<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/header.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/login.css" />
	</head>

	<body>
		<div class="login" id="login">
			<div class="contents">
				<div class="headerCon">
					<div class="header">
						<div class="logo">
							<a href="../index.html"><img src="../img/index/logo.png" /></a>
						</div>
					</div>
				</div>
				<div class="banner">
					<div class="container">
						<div class="content">
							<div class="title">
								<p class="pwd" :class="{active:loginType==1}" v-on:click="changType(1)">密码登录</p>
								<p :class="{active:loginType==2}" v-on:click="changType(2)">短信登录</p>
							</div>
							<div class="err" v-if="isError"><img src="../img/icon/err.png" />{{errMsg}}</div>
							<div class="inputs">
								<label for="phone"><img src="../img/icon/phone.png"/></label>
								<input type="text" name="phone" id="phone" placeholder="请输入手机号码" v-model="mobile" maxlength="11" />
							</div>
							<div class="inputs pwdInput" v-if="loginType==1">
								<label for="phone"><img src="../img/icon/pwd.png"/></label>
								<input type="password" name="password" id="password" placeholder="请输入密码" v-model="password" maxlength="16"/>
							</div>
							<div class="msgs" v-if="loginType==2">
								<input type="text" name="code" id="code" placeholder="请输入验证码" v-model="code" maxlength="6"/>
								<span v-on:click="getCode" :class="{active:time<60}">{{msg}}</span>
							</div>
							<div class="txt">
								<a href="forgetPwd.html">忘记登录密码</a>
								<a href="register.html">免费注册</a>
							</div>
							<p class="btns" v-on:click="toLogin">登录</p>
						</div>

					</div>

				</div>
			</div>
			<div id="page1"></div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
	<script src="../js/axios.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#page1").load("../publicView/footer.html");
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el: '#login',
			data: {
				loginType: 1,
				mobile: "",
				password: "",
				code: "",
				isError: false,
				errMsg: "",
				msg:"获取验证码",
				time:60,
				key:false
			},
			methods: {
				toLogin() {
					var that = this;
					if(!this.mobile) {
						this.showErr("请输入正确的手机号")
						return;
					}
					if(!(/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(this.mobile))) {
						this.showErr("请输入正确的手机号格式")
						return;
					}
					var url = "";
					var datas = {
						mobile: this.mobile,
						loginType: this.loginType,
						channel: '3'
					}
					if(this.loginType != 1) {
						if(!(/^\d{6}$/.test(this.code))) {
							this.showErr("请输入正确的短信验证码")
							return;
						}
						datas.code = this.code
					} else {
						if(!this.password) {
							this.showErr("请输入正确的登录密码")
							return;
						}
						if(!(/^[\w]{6,12}$/.test(this.password))) {
							this.showErr("密码为6-16位字符")
							return;
						}
						datas.password = this.password
					}
					getAjax("post", "/api/app/user/login", datas).then(res => {
							console.log(res)
							if(res.code!=0){
								this.showErr(res.msg)
							}else{
								Cookies.set('token', res.data.token);
								Cookies.set('user', JSON.stringify(res.data.user));
								window.location.href="../index.html"
							}
						});
					
				},
				changType(index) {
					this.loginType = index
				},
				showErr(str) {
					this.isError = true;
					this.errMsg = str;
				},
				getCode(){
					var that = this;
					if(!this.key){
					this.key=true;
					if(!this.mobile) {
						this.showErr("请输入正确的手机号")
						return;
					}
					if(!(/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(this.mobile))) {
						this.showErr("请输入正确的手机号格式")
						return;
					}
					var datas={
						mobile:this.mobile,
						type:4,
					}
					//that.timeDown();
					getAjax("post", "/api/app/sendMsg/getVerifyMsg", datas).then(res => {
							if(res.code!=0){
								this.showErr(res.msg)
								this.key=false;
							}else{
								that.timeDown();
							}
							
					})
}		
				},
			//倒计时
			timeDown(){
				var that=this;
				var msgTime=null;
				// 点击获取验证码后显示倒计时
				if(this.time==0){
					clearInterval(msgTime);
					this.key=false;
					this.time=60;
					this.msg="重新获取";
				}else{
					that.time--;					
					this.msg=that.time+"(s)"
					msgTime=setTimeout(function() {
						that.timeDown();
					}, 1000);
				}
			}
                  
			}
		})
	</script>

</html>